<script lang="ts" setup>
import { TableHeaderInfo } from './interface/table-header-info'
import { FuncViewData } from './interface/func-view-data'
import { computed } from "vue"

const props = defineProps<{
  viewList: Array<FuncViewData>
}>()

const viewListHeader: Array<TableHeaderInfo> = [
  {
    name: 'function',
    value: '功能点'
  },
  {
    name: 'mode',
    value: '支持'
  },
  {
    name: 'pointList',
    value: '功能点'
  },
  {
    name: 'description',
    value: '说明'
  }
]

const modeMap = {
  enable: 1,
  half: 2,
  disable: 3
}
const viewList2 = computed(() => {
  props.viewList.forEach(item => {
    item.pointList.sort((point, point2) => Number(point2.enable) - Number(point.enable))
    if (typeof item.mode === 'boolean') {
      if (item.mode) {
        item.mode = item.pointList.length ? 'half' : 'enable'
      } else {
        item.mode = 'disable'
      }
    }
  })
  return props.viewList.sort((item, item2) => modeMap[item.mode as string] - modeMap[item2.mode as string])
})

</script> 

<template>
  <FuncTable v-if="viewList2.length > 0" :headerInfo="viewListHeader" :data="viewList2">
    <template v-for="(header, i) in viewListHeader" #[header.name]="{ item }">
      <template v-if="header.name === 'mode'">
        <ModeIcon :mode="item.mode" :key="i"></ModeIcon>
      </template>
      <template v-else-if="header.name === 'pointList'">
        <BadgeTag v-for="point in item.pointList" :type="point.enable ? 'enable' : 'disable'" :text="point.name"
          :key="point.name + '-' + i"></BadgeTag>
      </template>
      <template v-else>
        {{ item[header.name] }}
      </template>
    </template>
  </FuncTable>
</template>